<template>
    <div class="upload-crop">
        <!--<a class="btn" @click="toggleShow">set avatar</a>-->
        <my-upload :field="field"
                   @crop-success="cropSuccess"
                   @crop-upload-success="cropUploadSuccess"
                   @crop-upload-fail="cropUploadFail"
                   v-model="show"
                   :width="500"
                   :height="285"
                   :url="url"
                   :params="params"
                   :headers="headers"
                   :no-circle="true"
                   :no-square="false"
                   :lang-ext="langExt"
                   img-format="png">
        </my-upload>
        <img :src="imgDataUrl" class="upload-box" @click="toggleShow">
    </div>
</template>

<script>
    import myUpload from 'vue-image-crop-upload'
    import api from '@/api/api.js'
    import { getRand } from "@/untils/random"
    import { signParams } from "@/untils/sign"

    var rand = getRand();

    export default {
        name: 'cms-upload-crop',
        props:{
            propField:{
                type:String,
                default:'',
            },
            src:{
                type:String,
                default:require('../../assets/images/default-plus.png'),
            },
        },
        data() {
            return {
                langExt:{
                    preview: '图片预览',
                },
                url: api.bsaeUpload,
                show: false,
                field: 'uploadFile',
                params: {
                    appId: process.env.appId,
                    sessionKey: localStorage.getItem("sessionKey"),
                    type: "image",
                    nonceStr: rand,
                    mark:'',
                },
                headers: {},
                imgDataUrl: '' // the datebase64 url of created image
            }
        },
        created(){
            this.imgDataUrl = this.src;
            this.params = signParams(this.params, process.env.appKey);
            if(!this.src){
                this.imgDataUrl = require('../../assets/images/default-plus.png')
            }
        },
        components: {
            'my-upload': myUpload
        },
        methods: {
            toggleShow() {
                this.show = !this.show;
            },
            /**
             * crop success
             *
             * [param] imgDataUrl
             * [param] field
             */
            cropSuccess(imgDataUrl, field){
                this.imgDataUrl = imgDataUrl;
            },
            /**
             * upload success
             *
             * [param] jsonData  server api return data, already json encode
             * [param] field
             */
            cropUploadSuccess(jsonData, field){
                console.log('-------- upload success --------');
                console.log(jsonData);
                this.$emit('get',jsonData.body.uploadPath, this.propField);
                console.log('field: ' + field);
            },
            /**
             * upload fail
             *
             * [param] status    server api return error status, like 500
             * [param] field
             */
            cropUploadFail(status, field){
                console.log('-------- upload fail --------');
                console.log(status);
                console.log('field: ' + field);
            }
        }
    }
</script>
<style scoped>
    .upload-box{
        width: 200px;
        height: 114px;
        border:1px dashed #d9d9d9;
        line-height: 57px;
        cursor: pointer;
    }
</style>